<template>
  <swiper class="wapper" :options="swiperOption" ref="mySwiper">
    <!-- slides -->
    <swiper-slide v-for="item in swiperList" :key="item.id">
      <a :href="item.linkUrl">
        <img @load="loadImage" class="swiper-img" :src="item.picUrl" alt="">
      </a>
    </swiper-slide>
    <!-- Optional controls -->
    <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
</template>
<script>
export default {
  props: {
    swiperList: {
      type: Array
    },
    scroll: {
      type: Object
    }
  },
  data () {
    return {
      swiperOption: {
        autoplay: 2000,
        loop: true,
        pagination: '.swiper-pagination'
      }
    }
  },
  methods: {
    loadImage () {
      if (!this.checkLodaed) {
        this.scroll.refresh()
        this.checkLodaed = true
      }
    }

  }
}
</script>

<style scoped lang="stylus">
  @import "~common/styles/variable"
  .wapper{
    height 0px;
    width 100%;
    padding-bottom 40%;
    overflow hidden;
  }
  .wapper >>> .swiper-pagination-bullet-active
    background-color $color-text
    width 16px
    border-radius 4px
  .wapper >>> .swiper-pagination-bullet
    background-color $color-text-l
  .swiper-img
    width 100%;
</style>
